// 由于需要大量用到上下文中的方法和属性

// 所以，setup函数一定要定义为function
export default function() {
	const { $ref, $reactive, $val } = $modules;
	// 将对象本身定义为响应式数据
	// 对于复杂对象的深度观察，需要指定观察层数
	// 默认为0层，即仅对第一层扁平层进行观察，可通过第二参控制观察深度
	const user = $reactive({
		name: '坤坤',
		age: 18,
		info: {
			// like数组中的元素位于第三层
			like: ['唱', '跳', 'rap', '篮球']
		},
	}, 2);
	// $ref实际式基于$reactive的语法糖，返回带有value属性的对象
	// $ref默认观察深度为1，即value属性下的扁平层，同样可通过第二参控制观察深度
	const count = $ref(1, 1);

	setInterval(() => {
		// 使用ref构造的响应式，value属性上
		++count.value;
	}, 1000)

	this.add(
		this.render({
			// $val：基于响应式数据构造观察器
			// 当user中的name属性变化，则自动更新
			children: $val(user.info.like, 0),
			// 点击试试
			onClick: () => {
				user.info.like[0] = '唱歌'
			}
		}),
		this.render({
			// $val：基于响应式数据构造观察器
			// 当count中的value属性变化，则自动更新
			children: $val(count, 'value')
		})
	)
}